<!-- 营销活动列表 -->
<template>
  <page-header-wrapper>
    <a-card v-show="!vdata.currentApplyPage.component" class="table-card">
      <div class="table-header">
        <div v-for="(item,index) in searchListSelect " :class="['table-item', indexSelect==index?'active':'']" @click="handleSelectState(item,index)">{{ item.label }}</div>
      </div>

      <GzSearchForm :searchFunc="searchFunc" :resetFunc="() => { searchData = {} }" searchConditionNum="6">
        <a-form-item class="table-search-item" label="审批流水编号">  
          <a-input v-model:value="searchData['auditSerialNo']" label="审批流水编号" :placeholder="'审批流水编号'" />
        </a-form-item>
        <a-form-item class="table-search-item" label="活动名称">  
          <a-input v-model:value="searchData['activityName']" label="活动名称" :placeholder="'活动名称'" />
        </a-form-item>
      </GzSearchForm>
      <!-- 列表渲染 -->
      <GzTable ref="infoTableRef" :init-data="true" :req-table-data-func="reqTableDataFunc" :table-columns="tableColumns" :search-data="searchData">
        <template #bodyCell="{ column, record }">
          <template v-if="$access('ENT_ACTIVITY_LIST_INFO_VIEW') && column.key === 'activityName'">
            <b><a @click="activityEdit(record,true)">{{ record.activityName }}</a></b>
          </template>
          <template v-if="column.key === 'state'">
            <a-badge v-if="record.state == 0" status="default" text="待审核" />
            <a-badge v-if="record.state == 1" status="success" style="color: #52c41a;" text="已通过" />
            <a-badge v-if="record.state == 2" style="color:#f5222d;" status="error" text="已驳回" />
          </template>
          <!-- 只有已驳回才显示驳回原因 -->
          <template v-if="column.key === 'remark'">
            <span v-if="record.state == 2" style="color:#f5222d;">{{ record.remark }}</span>
            <span v-else>--</span>
          </template>
          <template v-if="column.key === 'operation'">
            <!-- 操作列插槽 -->
            <GzTableColumns>
              <a-button v-if="$access('ENT_ACTIVITY_LIST_INFO_VIEW')" type="link" @click="activityEdit(record,true)">查看</a-button>
              <a-button v-if="$access('ENT_ACTIVITY_EXAMINE_INFO_EDIT') && record.activityTemplateNo === 'ACTE026' && record.state === 0" type="link" @click="examineDrawerRef.show(record)">自主发券审批</a-button>
              <a-button v-if="$access('ENT_ACTIVITY_EXAMINE_INFO_DOWN_CONFIG') && record?.couponList?.length" type="link" @click="downLetter(record,1)">配置函下载</a-button>
              <a-button v-if="$access('ENT_ACTIVITY_EXAMINE_INFO_DOWN_REPLY') && record?.couponList?.length && record.isDownLoadReceipt" type="link" @click="downLetter(record,2)">下载回执函</a-button>
              <a-button v-if="$access('ENT_ACTIVITY_EXAMINE_INFO_PARAMS') && record?.couponList?.length" type="link" @click="couponReceiptModalRef.show(record)">回参填写</a-button>
              <a-button v-if="$access('ENT_ACTIVITY_EXAMINE_INFO_EDIT') && record.state==0" type="link" @click="examineDrawerRef.show(record)">审批</a-button>
            </GzTableColumns>
          </template>
        </template>
      </GzTable>
    </a-card>
    <!-- 审批页面组件  -->
    <ExamineDrawer ref="examineDrawerRef" :callbackFunc="searchFunc" @switchApplyPage="switchApplyPage" />
    <!-- 下载设置函弹窗 -->
    <LicenseModal ref="licenseModalRef" />
    <!-- 卡券回执弹窗 -->
    <CouponReceiptModal ref="couponReceiptModalRef" :callbackFunc="searchFunc" />
    <!-- 活动详情动态组件 -->
    <!-- <component :is="vdata.templateCom" ref="templateComRef" /> -->
    <!-- 定义组件分为： 活动看板 创建活动 -->
    <a-card>
      <component :is="vdata.currentApplyPage.component" ref="applyPageComponentRef" :activityDetail="vdata.activityDetail" @switchApplyPage="switchApplyPage" />
    </a-card>
  </page-header-wrapper>
</template>

<script lang="ts" setup>
import {$getActivityExamineList,$getInvestorList,$downLetter} from '@/api/activityManage/activityExamine/index'
import { ref, reactive, getCurrentInstance, nextTick,provide,computed } from 'vue'
import { $getContributorList }from '@/api/awardMange/coupon/index'
import ExamineDrawer from '@/views/activity/activityExamine/ExamineDrawer.vue'
import LicenseModal from '@/views/activity/activityExamine/LicenseModal.vue'
import CouponReceiptModal from '@/views/activity/activityExamine/CouponReceiptModal.vue'

import ActivityStatistics from '@/views/activity/activityStatistics/ActivityStatistics.vue'
import ActivityCreateEntry from '@/views/activity/activityList/components/ActivityCreateEntry.vue'
import ActivityCreateSelectActivityTemplate from '@/views/activity/activityList/components/ActivityCreateSelectActivityTemplate.vue'

const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

const infoTableRef = ref()
const examineDrawerRef = ref()
const licenseModalRef = ref()
const couponReceiptModalRef = ref()
const templateComRef = ref()
const applyPageComponentRef = ref()
/** 定义全部组件 **/
const allApplyPage = {
  'list': { name: '列表', component: null },
  'activityStatistics': { name: '活动看板', component: ActivityStatistics },
  'activityCreateSelectActivityTemplate': { name: '选择活动模板', component: ActivityCreateSelectActivityTemplate },
  'activityCreateEntry':  { name: '创建活动', component: ActivityCreateEntry }
}

const vdata = reactive({
  templateCom: null, // 详情页组件
  currentApplyPage: allApplyPage.list, // 当前的步骤组件  null表示列表页
  activityDetail: {}, // 活动详情数据
  activityTemplateData: {}, // 创建活动的模板数据
  backupApplyPage:{}
})


// 向所有子组件注入参数 (子组件可直接更改此值)
provide('activityTemplateData', computed( ()=> vdata.activityTemplateData) )
// 向子组件传递出资方列表数据
provide('payAuthList', computed( ()=> payAuthList.value) )


let tableColumns = reactive([
  { key: 'auditSerialNo', title: '审批流水编号', dataIndex: 'auditSerialNo', width: 160, minWidth: 160, maxWidth: 200, },
  { key: 'activityName', title: '活动名称', dataIndex: 'activityName', width: 160, minWidth: 160, maxWidth: 200, },
  { key: 'infoId', title: '审批机构', dataIndex: 'infoId', width: 160, minWidth: 160, maxWidth: 200, },
  { key: 'agentName', title: '审批机构名称', dataIndex: 'agentName', width: 200, minWidth: 160, maxWidth: 200, },
  { key: 'infoType', title: '审批类型', dataIndex: 'infoType', width: 160, minWidth: 160, maxWidth: 200, },
  { key: 'updatedAt', title: '最后修改时间', dataIndex: 'updatedAt', width: 200, minWidth: 160, maxWidth: 200, },
  { key: 'realName', title: '最后修改账户', dataIndex: 'realName', width: 200, minWidth: 200, maxWidth: 200, },
  { key: 'pendingReviewAgent', title: '当前待审核机构', dataIndex: 'pendingReviewAgent', width: 220,   maxWidth: 220, },
  { key: 'state', title: '审批状态', dataIndex: 'state', width: 160, minWidth: 160, maxWidth: 200, },
  { key: 'remark', title: '驳回原因', dataIndex: 'remark', width: 160, minWidth: 160, maxWidth: 200, },
  { key: 'operation', title: '操作', dataIndex: 'operation', width: 260, align: 'center', },
])
const indexSelect = ref(0) // 选中状态
const searchListSelect = ref([
  { label: '待审批', value: 0 },
  { label: '已通过', value: 1 },
  { label: '已驳回', value: 2 }
])
const  searchData = ref({
  state: searchListSelect.value[indexSelect.value].value, // 默认选中第一个
  auditSerialNo: '',
  activityName: ''
} ) as any
function handleSelectState(item,index) {
  indexSelect.value = index
  searchData.value.state = item.value
  infoTableRef.value.refTable(true)
}

// 请求table接口数据
function reqTableDataFunc(params: any) {  
  return $getActivityExamineList(params)
}

function searchFunc() {
  infoTableRef.value.refTable(true)
}

/**
 * record 审批记录
 * fileType 1:设置函 2:回执函
 */
const downLetter = (record,fileType) =>{
  const { activityId,auditRecordsId } = record
  $downLetter({ activityId, auditRecordsId, fileType }).then(res=>{
    const filename = record.activityName + (fileType === 1 ? '设置函' : '回执函')
    const a = document.createElement('a')
    a.href = res
    a.download = filename // 设置下载文件名
    a.style.display = 'none'
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
  })
}

/**
 * 获取出资方列表
 */
const payAuthList = ref([]);
(function() {
  $getContributorList({}).then((result) => {
    payAuthList.value = result
  })
})()
/**
 * 切换面板
 * @param args { page: string, params: object }
 */
 function switchApplyPage(args) {
  const { page, params } = args
  vdata.backupApplyPage = vdata.currentApplyPage
  vdata.currentApplyPage = allApplyPage[page]

  if(vdata.currentApplyPage && vdata.currentApplyPage.component){
    nextTick(() => { applyPageComponentRef.value.pageRender(params) })
  }else{
    //列表页
    infoTableRef.value.refTable(params?.refresh) // 刷新
  }
}
/**
 * 修改
 */
 function activityEdit(record, isDetail = false) {
  // 修改活动 跳转到修改页面
  switchApplyPage({ page: 'activityCreateEntry', params: { isAdd: false, activityDetail: record, isDetail } })
}
</script>
<style lang="less" scoped>
.table-header{
  display: flex;

  margin-bottom: 16px;
  border-radius: 4px 4px 4px 4px;
  height: 41px;
  border:1px solid #0671EB;
  width: 256px;
  margin:25px;
  box-sizing: border-box;
  .table-item{
    width: 86px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    color: #0671EB;
    cursor: pointer;
 
    &.active{
      background-color: #0671EB;
      color: #fff;
    }
  }
}

</style>